<template>
	<div class="detail">
		<div class="div1">
			<el-input placeholder="请输入内容"></el-input>
			<el-button type="danger" icon="el-icon-search"></el-button>
		</div>
		<div class="div2">
			<p @click="back()"><i class="el-icon-back"></i>返回商品列表</p>
			<span>同类商品推荐</span>
			<hr/>
		</div>
		<div class="div3">
			<div class="img">
				<img :src="`${$ip}/api/public/showimg/${book.pic}`"/>
			</div>
			<div class="book">
				<p><strong>{{book.name}}</strong></p>
				<table>
					<tr>
						<td>品牌：</td>
						<td><strong>{{type.name}}</strong></td>
					</tr>
					<!-- <tr>
						<td>出版社：</td>
						<td><strong>{{book.maker}}</strong></td>
					</tr>
					<tr>
						<td>作者：</td>
						<td><strong>{{book.author}}</strong></td>
					</tr> -->
					<!-- <tr>
						<td>出版号：</td>
						<td>{{book.sn}}</td>
					</tr> -->
					<tr>
						<td>价格：</td>
						<td><strong>￥{{book.price}}</strong></td>
					</tr>
					<tr>
						<td>库存：</td>
						<td><strong>{{book.stock}}</strong></td>
					</tr>
					<tr>
						<td>销售量：</td>
						<td><strong>{{book.salenum}}</strong></td>
					</tr>
					<tr>
						<td>发布时间：</td>
						<td>{{time}}</td>
					</tr>
				</table>
				<p>简介:</p><span>{{book.info}}</span>
				<br />
				<el-button type="danger" @click="AddCart(book.id)"><i class="el-icon-shopping-cart-full"></i> 加入购物车</el-button>
			</div>
			<div class="list">
				<div class="rec" v-for="item in list">
					<div class="img2">
						<img :src="`${$ip}/api/public/showimg/${item.pic}`"/>
					</div>
					<div class="rec-book">
							<a href="javascript:void(0);" @click="find(item.id)">
								<aside class="aside1">
									<span>{{item.name}}</span>
									<p><strong>￥{{item.price}}</strong></p>
								</aside>
								<aside class="aside2">
									<span>{{item.maker}}</span>
								</aside>
							</a>
					</div>
				</div>
			</div>
		</div>
		<aside class="a">
			<i class="el-icon-edit-outline" style="color: red;"></i><span><strong> 商品评价</strong></span>
		</aside>
		<div class="div4">
			<hr />
			<div class="rate">
				<aside>
					<img :src="`${$ip}/api/public/showimg/${this.$store.state.img}`"/>
				</aside>
				<div>
					<p>{{this.$store.state.name}}</p>
					请给商品评分:<el-rate v-model="comment.rate" show-text></el-rate>
				</div>
			</div>
			<div class="text">
				<el-input v-model="comment.content" placeholder="请输入评论内容..."></el-input>
				<el-button @click="add(book.id)" type="success">发送</el-button>
			</div>
			<div class="tex" v-for="item in comments">
				<aside class="aside1">
					<img :src="`${$ip}/api/public/showimg/${item.img}`"/>
				</aside>
				<aside class="aside2">
					<aside class="info">
						<span>{{item.nickname}}</span>
						<aside class="time">
							<el-rate v-model="item.rate" disabled show-scoretext-color="#ff9900"
						score-template="{value}">
						</el-rate>
						<span>{{item.tpost}}</span>
						</aside>
					</aside>
					<p>{{item.content}}</p>
				</aside>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name:'PcBookDetail',
	data(){
		return{
			book:{},
			type:{},
			list:[],
			bookid:0,
			comment:{
				content:'',
				rate:0,
			},
			page:{
				num:1,
				lines:6
			},
			total:0,
			comments:[],
		}
	},
	computed:{
		time(){
			let year =new Date(this.book.tmake).getFullYear();
			let month =new Date(this.book.tmake).getMonth();
			this.book.tmake =`${year}-${month}`;
			return this.book.tmake;
		}
	},
	methods:{
		// 返回上一个页面
		back(){
			this.$router.go(-1);
		},
		//根据当前书籍的id查找当前书籍的评论
		findRate(){
			console.log(this.comments);
			console.log(this.bookid);
			this.$get("/api/public/rate/findByBookid/"+this.bookid + "/" + this.page.num + "/" +this.page.lines).then((resp)=>{
				this.comments =resp.data.data.comments;
				this.total =resp.data.data.total
				console.log(this.comments);
				console.log(this.total);
			})
		},
		// 添加评论
		add(id){
			if(this.comment.content !=''){
				this.$postkv(`/api/public/rate/add/${id}`,this.comment).then((resp)=>{
					this.findRate();
				this.$message({
				      message: resp.data.msg,
				      type: 'success'
					});
				})
			}
		},
		// 添加购物车
		AddCart(id){
			if(this.$store.state.role!=''){
				this.$get("/api/public/addCart/"+id).then((resp)=>{
					this.$message({
						  message: resp.data.msg,
						  type: 'success'
					});
				})
			}else{
				this.$message.error('您未登录,请先登录!')
			}
		},
		// 根据id查找书籍
		findBook(){
				this.$get("/api/public/book/findById/"+this.bookid).then((resp)=>{
				this.book =resp.data.data;
				this.type =resp.data.data.type;
				console.log(this.book);
				// 根据同类型查找
				this.$get("/api/public/findPageBook/1/5/"+resp.data.data.type.id).then((resp)=>{
					this.list =resp.data.data.books;
					console.log(resp.data.data.books);
					})
				})
		},
		// 点击同类书籍查找
		find(id){
			this.bookid =id;
			this.findBook();
		}
	},
	mounted(){
		this.bookid =this.$route.params.bookid;
		this.findBook();
		this.findRate();
	}
}
</script>

<style scoped>
.detail{
	width: 78%;
	margin: 0 auto;
}
.detail .div1{
	margin-top: 20px;
}
.detail .div1 .el-input{
	width: 600px;
	margin-left: 350px;
}
.detail .div2{
	margin-top: 10px;
}
.detail .div2 p{
	display: inline;	/* 将p标签转为行标签 */
	cursor: pointer;
}
.detail .div2 p:hover{
	color: red;
}
.detail .div2 span{
	color: red;
	margin-left: 52vw;
}
.detail .div2 hr{
	border: 1px solid red;
}
.detail .div3{
	width: 98%;
	margin: 0 auto;
	display: flex;
}
.detail .div3 .img{
	width: 480px;
	height: 400px;
	border: 1px solid #e1e1e1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.detail .div3 .img img{
	width: 99%;
	height:99%;
}
.detail .div3 .book{
	width: 450px;
	margin-left: 30px;
}
.detail .div3 .book a{
	color: black;
}
.detail .div3 .book p{
	margin-top: 10px;
}
.detail .div3 .book table{
	margin-top: 10px;
}
.detail .div3 .book table tr{
	line-height: 28px;
}
.detail .div3 .book table td{
	font-size: 14px;
}
.detail .div3 .book span{
	display: flex;
	text-indent: 35px;
	word-wrap: break-word;
	word-break: break-all;
	overflow: hidden;
}
.detail .div3 .list{
	width: 260px;
	margin-left: 35px;
}
.detail .div3 .rec{
	width: 100%;
	display: flex;
	align-items: center;
	padding-right: 10px;
}
.detail .div3 .rec:hover{
	background-color: bisque;
}
.detail .div3 .rec .img2{
	width: 50px;
	height: 50px;
	padding: 4px;
}
.detail .div3 .rec .img2 img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.detail .div3 .rec .rec-book{
	width: 80%;
}
.detail .div3 .rec .rec-book a{
	color: black;
}
.detail .div3 .rec .rec-book .aside1{
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.detail .div3 .rec .rec-book .aside1 span{
	overflow: hidden;
	text-wrap: nowrap;
	text-overflow: ellipsis;
}
.detail .div3 .rec .rec-book .aside1 span:hover{
	color: red;
}
.detail .div3 .rec .rec-book .aside2{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.detail .div3 .rec .rec-book .aside2{
	font-size: 13px;
}
.detail .a{
	margin-top: 20px;
	margin-left: 18px;
}
.detail .a span{
	color: #8a53eb;
}
.detail .div4{
	width: 98%;
	margin: 0 auto;
	margin-top: 10px;
	background-color: #efefef;
	border-radius: 10px;
	padding: 8px;
}
.detail .div4 hr{
	border: none;
	height: 1.4px;
	background-color: #8f57f7;
}
.detail .div4 .rate{
	width: 99%;
	margin: 0 auto;
	display: flex;
}
.detail .div4 .rate aside{
	width: 80px;
	height: 80px;
}
.detail .div4 .rate aside img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.detail .div4 .rate div{
	width: 40%;
	margin-top: 5px;
	margin-left: 20px;
}
.detail .div4 .rate div p{
	margin-bottom: 10px;
}
.detail .div4 .rate div .el-rate{
	margin-left: 100px;
}
.detail .div4 .text{
	margin-top: 20px;
	align-items: center;
	justify-content: center;
	display: flex;
}
.detail .div4 .text .el-input{
	width: 81%;
}
.detail .div4 .text .el-button{
	margin-left: 10px;
}
.detail .div4 .tex{
	width: 98%;
	margin: 0 auto;
	margin-top: 50px;
	display: flex;
	align-items: center;
	border-top: 1px solid #e1e1e1;
}
.detail .div4 .tex .aside1{
	width: 65px;
	height: 65px;
	margin-top: 8px;
}
.detail .div4 .tex .aside1 img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.detail .div4 .tex .aside2{
	width: 94%;
	margin-left: 15px;
}
.detail .div4 .tex .aside2 p{
	width: 85%;
	font-size: 15px;
	margin-top: 4px;
	word-wrap: break-word;
	word-break: break-all;
	overflow: hidden;
}
.detail .div4 .tex .aside2 .info{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>
